
// http://124.223.14.236:8060/admin

localStorage.setItem('token', 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ1c2VyaW5mbyI6eyJpZCI6IjEiLCJsb2dpbl9uYW1lIjoiYWRtaW4iLCJwYXNzd29yZCI6Ijk2ZTc5MjE4OTY1ZWI3MmM5MmE1NDlkZDVhMzMwMTEyIiwibmFtZSI6IlRoaW5rSlPkuIDlk6UiLCJlbWFpbCI6Imhld3UxMTIyQDE2My5jb20iLCJwaG9uZSI6IjE3MzQyMDY1OTA5IiwibG9naW5faXAiOiI6OjEiLCJsb2dpbl9kYXRlIjoiMjAxOC0wMS0wOCAxNjoyMjo1MSIsImNyZWF0ZV9kYXRlIjoiMjAxNy0xMi0xNCAxMTo1Mjo0NiIsInVwZGF0ZV9kYXRlIjoiMjAyMS0wOS0wOCAxOTo0MzowMyIsImRlbF9mbGFnIjoiMCIsInJvbGVfaWQiOlsiMWM1NGUwMDNjMWZjNGRjZDliMDg3ZWY4ZDQ4YWJhYzMiXSwic3RhdHVzIjoxLCJkZWZhdWx0X2RhdGEiOiIxIiwicm9sZW5hbWUiOlsi6LaF57qn566h55CG5ZGYIl19LCJpYXQiOjE2NjY4NDIzMzF9.KYWxeh7pKbUAo817unFRpkdrzLWqvw08H_HCfSMF1DI')
const xhr = new XMLHttpRequest()
xhr.open('get', 'http://124.223.14.236:8060/admin/ydd_cate/all')
xhr.setRequestHeader('x-token', localStorage.getItem('token'))
xhr.send()
xhr.onreadystatechange = function () {
  if (xhr.readyState === 4 && xhr.status === 200) {
    // console.log(JSON.parse(xhr.responseText));
    const two = JSON.parse(xhr.responseText).data.map(function (item, i) {
      return `
      <div class="xr">
      <div class="xr_one">${i}</div>
      <div class="xr_id"  >${item.id}</div>
      <div class="xr_fl">${item.catename}</div>
    
      <div class="xr_cz">
        <div class="xr_left">
        <i class="iconfont icon-bianjisekuai"></i></div>
        <div class="xr_right">
        <a class="iconfont icon-lajitong"data-id=${item.id} ></a>
        </div>
      </div>
      </div>
      `

    }).join('')

    document.querySelector('.xr_max ').innerHTML = two
  }
}

// console.log(localStorage.getItem('token'));

document.querySelector('.ssk').addEventListener('click', function () {
  console.log(12);
  const id = document.querySelector('.layui-input').value
  console.log(id);
  const xhr1 = new XMLHttpRequest()
  xhr1.open('get', `http://124.223.14.236:8060/admin/ydd_cate/rowInfo?id=${id}`)
  xhr1.setRequestHeader('x-token', localStorage.getItem('token'))
  xhr1.send()
  xhr1.onreadystatechange = () => {
    if (xhr1.readyState === 4 && xhr1.status === 200) {
      const { catename, default_data, icon, id, sort_num } = JSON.parse(xhr1.responseText).data
      // console.log(JSON.parse(xhr1.responseText).data);
      document.querySelector('.xr_max ').innerHTML = `
      <div class="xr">
      <div class="xr_one">${default_data}</div>
      <div class="xr_id">${id}</div>
      <div class="xr_fl">${catename}</div>
      <div class="xr_tb">${icon}</div>
      <div class="xr_qz">${sort_num}</div>
      <div class="xr_cz">
        <div class="xr_left">
        <i class="iconfont icon-bianjisekuai"></i></div>
        <div class="xr_right">
        <a class="iconfont icon-lajitong"></a>
        </div>
      </div>
      </div>
      `
    }
  }
})

document.querySelector('.skk').addEventListener('click', function () {

  const xhr = new XMLHttpRequest()
  xhr.open('get', 'http://124.223.14.236:8060/admin/ydd_cate/all')
  xhr.setRequestHeader('x-token', localStorage.getItem('token'))
  xhr.send()
  xhr.onreadystatechange = function () {
    if (xhr.readyState === 4 && xhr.status === 200) {
      // console.log(JSON.parse(xhr.responseText));
      const two = JSON.parse(xhr.responseText).data.map(function (item, i) {
        return `
      <div class="xr">
      <div class="xr_one">${i}</div>
      <div class="xr_id">${item.id}</div>
      <div class="xr_fl">${item.catename}</div>
      <div class="xr_tb">${item.icon}</div>
      <div class="xr_qz">${item.sort_num}</div>
      <div class="xr_cz">
        <div class="xr_left">
        <i class="iconfont icon-bianjisekuai"></i>
        </div>
        <div class="xr_right">
        <a class="iconfont icon-lajitong"data-id=${item.id} ></a>
        </div>
      </div>
      </div>
      `

      }).join('')

      document.querySelector('.xr_max ').innerHTML = two
    }
  }

})


//******************************** */


document.querySelector('.bg').addEventListener('click', function (e) {
  // console.log(12);
  if (e.target.tagName === `A`) {
    const shanchu = e.target.dataset.id
    // console.log(shanchu);


    const xhr5 = new XMLHttpRequest()
    xhr5.open('GET', `http://124.223.14.236:8060/admin/ydd_cate/del?id=${shanchu}`)
    xhr5.setRequestHeader('x-token', localStorage.getItem('token'))
    xhr5.send()
    xhr5.onreadystatechange = () => {
      if (xhr5.readyState === 4 && xhr5.status === 200) {
        console.log(JSON.parse(xhr5.responseText));

        if (JSON.parse(xhr5.responseText).errno === 1000) {
          return alert(JSON.parse(xhr5.responseText).errmsg)

        }

        const xhr = new XMLHttpRequest()
        xhr.open('get', 'http://124.223.14.236:8060/admin/ydd_tag/del')
        xhr.setRequestHeader('x-token', localStorage.getItem('token'))
        xhr.send()
        xhr.onreadystatechange = function () {
          if (xhr.readyState === 4 && xhr.status === 200) {
            // console.log(JSON.parse(xhr.responseText));
            const two = JSON.parse(xhr.responseText).data.map(function (item, i) {
              return `
          <div class="xr">
          <div class="xr_one">${i}</div>
          <div class="xr_id"  >${item.id}</div>
          <div class="xr_fl">${item.catename}</div>
          <div class="xr_tb">${item.icon}</div>
          <div class="xr_qz">${item.sort_num}</div>
          <div class="xr_cz">
            <div class="xr_left">
            <i class="iconfont icon-bianjisekuai"></i></div>
            <div class="xr_right">
            <a class="iconfont icon-lajitong"data-id=${item.id} ></a>
            </div>
          </div>
          </div>
          `

            }).join('')

            document.querySelector('.xr_max ').innerHTML = two
            alert('删除成功')
          }
        }
      }

    }



  }


})
















var laypage = layui.laypage;

function render(data) {
  const two = data.map(function (item, i) {
    return `
  <div class="xr">
  <div class="xr_one">${i}</div>
  <div class="xr_id"  >${item.id}</div>
  <div class="xr_fl">${item.catename}</div>
  <div class="xr_tb">${item.icon}</div>
  <div class="xr_qz">${item.sort_num}</div>
  <div class="xr_cz">
    <div class="xr_left">
    <i class="iconfont icon-bianjisekuai"></i></div>
    <div class="xr_right">
    <a class="iconfont icon-lajitong"data-id=${item.id} ></a>
    </div>
  </div>
  </div>
  `
  }).join('')

  document.querySelector('.xr_max ').innerHTML = two
}

var q = {
  page: '1', // 页码值，默认请求第一页的数据
  limit: '10', // 每页显示几条数据，默认每页显示2条
  catename: ''
}
initTable()

function initTable() {
  $.ajax({
    method: 'GET',
    url: 'http://124.223.14.236:8060/admin/ydd_cate/list',
    data: q,
    headers: {
      'x-token': localStorage.getItem('token') || ''
    },
    success: function (res) {
      console.log(res);
      renderPage(res.data.count)
      render(res.data.data)
    }
  })
}

// 定义渲染分页的方法
function renderPage(total) {
  // 调用 laypage.render() 方法来渲染分页的结构
  laypage.render({
    elem: 'pageBox', // 分页容器的 Id
    count: total, // 总数据条数
    limit: q.limit, // 每页显示几条数据
    curr: q.page, // 设置默认被选中的分页
    layout: ['count', 'limit', 'prev', 'page', 'next', 'skip'],
    limits: [10, 20, 40, 50, 100],// 每页展示多少条
    // 分页发生切换的时候，触发 jump 回调
    // 触发 jump 回调的方式有两种：
    // 1. 点击页码的时候，会触发 jump 回调
    // 2. 只要调用了 laypage.render() 方法，就会触发 jump 回调

    jump: function (obj, first) {
      // 可以通过 first 的值，来判断是通过哪种方式，触发的 jump 回调
      // 如果 first 的值为 true，证明是方式2触发的
      // 否则就是方式1触发的
      // console.log(first)
      // console.log(obj.curr)
      // 把最新的页码值，赋值到 q 这个查询参数对象中
      q.page = obj.curr  // obj.curr是layui内置的 点击能获取第几页 点击下一页也能获取
      q.limit = obj.limit  // obj.limit  每页展示多少条
      // 根据最新的 q 获取对应的数据列表，并渲染表格
      // initTable()
      if (!first) {
        initTable()
      }
    }
  })
}













